<script setup lang="ts">
import { ref, onMounted } from 'vue'
// import { useMotion } from '@vueuse/motion'
// import type { MotionInstance } from '@vueuse/motion'

interface SolutionItem {
  icon: string;
  title: string;
  desc: string;
  features: string[];
  cover: string;
}

// 修复2：保持单一解决方案列表声明
const solutions = ref<SolutionItem[]>([])
const activeIndex = ref(0)
const isLoading = ref(true)

// 修复3：正确初始化动画实例
// 修复 MotionInstance 泛型参数
const solutionCoverRef = ref<HTMLImageElement | null>(null)
// const motionInstance = ref<MotionInstance<"HTMLImageElement", { scale: number; x: number }>()

onMounted(() => {
  // 初始化动画实例
  // motionInstance.value = useMotion(solutionCoverRef, {
  //   initial: { scale: 1 },
  //   enter: { scale: 1 }
  // })

  // 保持原有的数据加载逻辑
  loadSolutions()
})

// 修复4：将数据加载封装为独立函数
const loadSolutions = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 800))
    solutions.value = [
      {
        icon: '/icons/medical-icon.svg',
        title: '慢病管理系统',
        desc: '糖尿病等慢性疾病全程管理方案',
        features: ['实时监测', '智能预警', '医患互动'],
        cover: '/images/solutions/chronic-disease.jpg'
      },
      // 其他解决方案...
    ]
  } catch (error) {
    console.error('数据加载失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 修复5：确保事件处理器正确定义
const onImageError = (e: Event) => {
  const img = e.target as HTMLImageElement
  if (img.tagName === 'IMG') {
    img.src = '/images/placeholder.jpg'
  }
}

// 新增图片加载状态（如果不存在）
const imageLoaded = ref(false)
// 修复 onImageLoad 类型声明
const onImageLoad = () => {
  imageLoaded.value = true
}
</script>

<template>
<!-- 修复6：修正模板结构 -->
<div class="solutions-container">
  <div class="media-section">
    <img
      ref="solutionCoverRef"
      :src="solutions[activeIndex]?.cover"
      @load="onImageLoad"
      @error="onImageError"
      class="solution-cover"
      :class="{ loaded: imageLoaded }"
    >
    <div class="interactive-overlay">
      <!-- 保持按钮结构... -->
    </div>
  </div>

  <!-- 修复7：修正列表渲染条件 -->
  <ul 
    class="feature-list" 
    v-if="solutions[activeIndex]?.features?.length"
  >
    <li 
      v-for="(feature, i) in solutions[activeIndex]?.features"
      :key="`feature-${activeIndex}-${i}`"
    >
      <div>{{feature}}</div>
      <!-- 保持列表项内容... -->
    </li>
  </ul>
</div>
</template>

<style scoped lang="scss">
// 优化动画性能
.solution-cover {
  backface-visibility: hidden;
  transform: translateZ(0);
}

// 增强可访问性
.zoom-button {
  &:focus {
    outline: 2px solid $sansure-blue;
    outline-offset: 2px;
  }
}

// 优化移动端触控区域
@media (max-width: 768px) {
  .zoom-button {
    min-width: 44px;
    min-height: 44px;
  }
}
</style>